<template>
	<div class="index-header">
		<div class="top">
				<!-- <i class="oneshow-logo"></i> -->
				<span class="one-show">OneShow</span>
				<div class="header-search">
					<el-input
						placeholder="请输入名称关键字"
						v-model="keyWords">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>				
				</div>				
				<div class="upload-file">
					<el-button type="primary" round icon="el-icon-upload" @click="centerDialogVisible = true"></el-button>
				</div>			
				<router-link to="/user">
					<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
					<span class="user-name">张三</span>
				</router-link>	
				<el-button v-if='isShow' type="primary" circle icon="el-icon-back" @click="back()"></el-button>							
		</div>
		<!-- <div class="nav">
			<router-link to="/recommend" class="nav-item">列表页</router-link>
			<router-link to="/singerlist" class="nav-item">列表单列</router-link>
			<router-link to="/toplists" class="nav-item">数据</router-link>
			<router-link to="/search" class="nav-item">搜索</router-link>
			<router-link to="/detail" class="nav-item">详情</router-link>
		</div> -->
			<el-dialog
				title="资源上传"
				:visible.sync="centerDialogVisible"
				width="45%"
				center>
				<div>
					<span v-for="(item,index) in sourceList" @click='goUpload(item)' class="icon-box">
						<strong class="icon-icon">
							<i :class="item.icon" style="font-size: 50px;color: #66b1ff;"></i>
						</strong>
						<span>{{item.name}}</span>
					</span>
				</div>
				<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">关闭</el-button>
				</span>
			</el-dialog>	
	</div>
</template>
<script>
	import SourceType from '@/components/SourceType'
	export default {
		components:{
			SourceType
		},
		watch:{
			$route(now,old){     //监控路由变换，控制返回按钮的显示
				if( now.path=="/recommend" ){
					this.isShow=false;
				} else{
					this.isShow=true;
				}
			}
		},				
		data() {
			return {
				isShow:false,
				fileList: [],
				centerDialogVisible: false,
				keyWords:'',
				sourceList:[
					{name:'图片',icon:'el-icon-picture-outline',type:'picture'},
					{name:'视频',icon:'el-icon-video-camera',type:'video'},
					{name:'PPT',icon:'el-icon-document-remove',type:'ppt'},
					{name:'VR资源',icon:'el-icon-view',type:'vr'},
					{name:'AR资源',icon:'el-icon-headset',type:'ar'},
					{name:'行业可视化系统',icon:'el-icon-date',type:'system'}
				]
			};
		},		
		methods:{
			goTo(){
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			goUpload(item){
				this.centerDialogVisible = false;
				if(item.type){
					this.$router.push({  
						path:'/upload',   
						query:{           
							type: item.type 
						}
					})					
				}
			},
			back(){
				this.$router.go(-1);
			}			
		}
	}
</script>
<style scoped>
	.one-show{
		font-size: 28px;
		color: #fff;
		font-weight: 700;
	}
	.top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 75px;
		padding: 0 10px;
	    background-color:#02a7f0;
		width: 80%;
		margin: 0 auto;
	}
	.index-header{
		width: 100%;
		background-color:#02a7f0;
	}
	/* .upload-file{
		margin-left: 70%;
	} */
	.header-search{
		vertical-align: middle;
		margin-left: 60%;
	}
	.oneshow-logo{
		width: 90px;
		height: 25px;
		background-image: url('../assets/img/oneshowLogo.png');
		background-size: cover;
	}
	.top .iconfont{
		font-size: 22px;
		color: #fff;
	}
	.el-button--mini, .el-button--small {
		font-size: 14px;
		border-radius: 3px;
	}
	.nav{
		display: flex;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
	}
	.nav-item{
		flex-grow: 1;
		text-align: center;
		color: #666;
	}
	.router-link-active{
		color: #02a7f0;
		border-bottom: 2px solid #02a7f0;
	}
	.user-name{
		position: relative;
		top: -13px;
		font-size: 14px;
		color: #fff;
		font-weight: 700;
	}
	.icon-box{
		display: inline-block;
		width: 120px;
    	height: 116px;
		border: 1px solid #ddd;
		text-align: center;
		margin: 5px;
		cursor: pointer;
	}
	.icon-box>span{
		width: 120px;
		display: inline-block;
		line-height: 73px;
	}
	.icon-icon{
		position: relative;
		top: 13px;
	}
</style>